<template>
  <div>
    <div class="footer-brand">
      <div class="banner">
        <div class="footer-brand_title">
          <h2>爱康集团品牌</h2>
          <p>
            <i>健康体检 | 疾病检测 | 综合门诊 | 齿科服务 |</i>
            <i>私人医生 | 职场医疗 | 疫苗接种 | 抗衰老 | 移动医疗</i>
          </p>
        </div>
        <div class="footer-brand_img">
          <ul>
            <li>
              <a href=""
                ><img
                  src="https://static-newmall.health.ikang.com/img/pic_group_01ikgb@2x.e99e6a12.png"
                  alt=""
              /></a>
            </li>
            <li>
              <a href=""
                ><img
                  src="https://static-newmall.health.ikang.com/img/pic_group_02ikzy@2x.bc79a178.png"
                  alt=""
              /></a>
            </li>
            <li>
              <a href=""
                ><img
                  src="https://static-newmall.health.ikang.com/img/pic_group_03ikja@2x.a0014aef.png"
                  alt=""
              /></a>
            </li>
            <li>
              <a href=""
                ><img
                  src="https://static-newmall.health.ikang.com/img/pic_group_04ikck@2x.dbf29ec6.png"
                  alt=""
              /></a>
            </li>
            <li>
              <a href=""
                ><img
                  src="https://static-newmall.health.ikang.com/img/pic_group_05ikmz@2x.3442421b.png"
                  alt=""
              /></a>
            </li>
            <li>
              <a href=""
                ><img
                  src="https://static-newmall.health.ikang.com/img/pic_group_06ikjw@2x.e6fc0d03.png"
                  alt=""
              /></a>
            </li>
            <li>
              <a href=""
                ><img
                  src="https://static-newmall.health.ikang.com/img/pic_group_07ikkyb@2x.39e65d36.png"
                  alt=""
              /></a>
            </li>
            <li>
              <a href=""
                ><img
                  src="https://static-newmall.health.ikang.com/img/pic_group_08zjyl@2x.ccc331f1.png"
                  alt=""
              /></a>
            </li>
            <li>
              <a href=""
                ><img
                  src="https://static-newmall.health.ikang.com/img/pic_group_09zyx@2x.13dc4821.png"
                  alt=""
              /></a>
            </li>
            <li>
              <a href=""
                ><img
                  src="https://static-newmall.health.ikang.com/img/pic_group_10Ikhc@2x.26143bb8.png"
                  alt=""
              /></a>
            </li>
            <li>
              <a href=""
                ><img
                  src="https://static-newmall.health.ikang.com/img/pic_group_13ikapp@2x.7e0513ad.png"
                  alt=""
              /></a>
            </li>
            <li>
              <a href=""
                ><img
                  src="https://static-newmall.health.ikang.com/img/pic_group_14iktjb@2x.ba3e59fd.png"
                  alt=""
              /></a>
            </li>
            <li>
              <a href=""
                ><img
                  src="https://static-newmall.health.ikang.com/img/pic_group_15dyt@2x.1cfe2eac.png"
                  alt=""
              /></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <footer>
      <div class="footer-point">
        <div class="fot">
          <ul>
            <li>
              <span class="iconfont1">&#xe790;</span><span>官方直营</span>
            </li>
            <li>
              <span class="iconfont1 a">&#xe615;</span><span>团队优势</span>
            </li>
            <li>
              <span class="iconfont1 a">&#xe6b5;</span><span>专业保证</span>
            </li>
            <li>
              <span class="iconfont1 b">&#xe643;</span><span>售后服务</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="footer-service">
        <div class="footer-service-two">
          <van-collapse v-model="activeName" accordion>
            <van-collapse-item title="客户服务" name="1" border value>
              <div>帮助中心</div>
              <div>退换货承诺</div>
              <div>关于发货快递</div>
              <div>隐私声明</div>
            </van-collapse-item>
            <van-collapse-item title="业务合作" name="2" border
              >联系我们</van-collapse-item
            >
          </van-collapse>
        </div>
      </div>
      <div class="footer-service_wap__relevant">
        <ul>
          <li><span>体验宝APP</span><span class="xiazai">点击下载 ></span></li>
          <li><span>爱康APP</span><span class="xiazai">点击下载 ></span></li>
          <li><span>微信公众号</span><span>爱康iKang</span></li>
        </ul>
      </div>
      <div class="footer-copyright">
        <div class="wrap mobile">
          <div class="footer-copyright_content">
            <p>© 2004-2021 爱康 iKang.com 版权所有</p>
            <p>
              <span
                >经营许可证编号：京ICP证041625号 | 京ICP备07503198号-1 |
                京公网安备：110105000860 | 注册号：110108007479743</span
              >
            </p>
            <p>
              <span>食品流通许可证编号：SP1101051310270433</span
              ><span>&nbsp;|&nbsp;</span
              ><span
                >互联网医疗保健信息服务：京卫网审[2013]第0005号 |
                京卫网审[2010]第0113号</span
              >
            </p>
            <p>
              <span
                >本网站内容覆盖：爱康国宾健康体检管理集团有限公司 | iKang Guobin
                Healthcare Group, Inc.</span
              ><span>&nbsp;|&nbsp;</span
              ><span
                >爱康网健康科技（北京）有限公司 |
                上海爱康国宾集团有限公司及其他关联公司的相关信息</span
              >
            </p>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import Vue from "vue";
import { Collapse, CollapseItem } from "vant";

Vue.use(Collapse);
Vue.use(CollapseItem);
export default {
  data() {
    return {
      activeName: "1",
    };
  },
};
</script>

<style lang='stylus' scoped>
@import '../../../assets/border.styl';

.banner {
  padding: 0.4416rem 0.15rem;

  .footer-brand_title {
    text-align: center;
    font-size: 0.36rem;

    h2 {
      width: 100%;
      font-size: 0.26496rem;
      line-height: 0.369838rem;
      font-weight: 500;
      text-align: center;
    }

    p {
      i {
        display: block;
        margin-bottom: 0.05519862rem;
        font-size: 0.13248rem;
        line-height: 0.1656rem;
        margin-top: 0.05519862rem;
        color: #83817f;
      }
    }
  }

  .footer-brand_img {
    margin-top: 0.3312rem;

    ul {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-between;
      align-content: center;

      li {
        width: 30.43%;
        margin: 0 0 0.14rem 0;
        border_1px(1px 1px 1px 1px);

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.fot {
  padding: 0 0.15rem;
  background-color: #f1f1f1;

  ul {
    padding: 0.276rem 0;
    border_1px(0 0 1px 0);
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    li {
      width: 22%;
      font-size: 0.13rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: center;

      .iconfont1 {
        font-size: 0.39744rem;
        color: #3f3c3c;
      }

      .a {
        display: block;
        font-size: 0.36rem;
        margin-top: 0.07rem;
      }

      .b {
        margin-top: 0.04rem;
      }
    }
  }
}

.footer-service_wap__relevant {
  padding-top: 0.0828rem;
  background-color: #dedede;

  ul {
    padding: 0 0.15rem;
    background-color: #f1f1f1;

    li {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-weight: 500;
      color: #2d2c2c;
      line-height: 0.56rem;
      font-size: 0.166558rem;
      font-weight: 500;
      border_1px(0 0 1px 0);

      .xiazai {
        font-size: 0.16rem;
        color: #999;
      }
    }
  }
}

.footer-copyright {
  text-align: center;
  padding-top: 0.1rem;
  padding-bottom: 0.2rem;
  background-color: #f1f1f1;
  margin-bottom:.5rem
}
</style>
<style lang='stylus'>
.van-collapse {
  background-color: #f1f1f1;

  .van-collapse-item {
    background-color: #f1f1f1;

    .van-cell {
      background-color: #f1f1f1;

      .van-cell__title {
        background-color: #f1f1f1;

        span {
          background-color: #f1f1f1;
          font-weight: 500;
          font-size: 0.166558rem;
          color: rgb(45, 44, 44);
        }
      }
    }

    .van-collapse-item__wrapper {
      background-color: #e3e3e3 !important;

      .van-collapse-item__content {
        background-color: #e3e3e3 !important;
        height: 100%;
        color: rgb(45, 44, 44);
        font-size: 0.15rem;
        margin-left: 0.14rem;

        div {
          height: 0.46rem;
          border_1px(0 0 1px 0);
          line-height: 0.46rem;
        }
      }
    }
  }
}
</style>